<template>
    <div>
        <Table :columns="columns" :data="data1" class="table" stripe ref="myTable">
            <template v-slot:operate="row">
                <Button type="info" size="small" style="margin-right: 5px" v-has="vm.$res.userAddRole"
                        @click="change(row)">授权
                </Button>
                <Button type="success" size="small" style="margin-right: 5px" v-has="vm.$res.userStatus"
                        @click="statusUpdate(row,0)" v-if="row.status===-1">启用
                </Button>
                <Button type="error" size="small" style="margin-right: 5px" v-has="vm.$res.userStatus"
                        @click="statusUpdate(row,-1)" v-if="row.status===0">禁用
                </Button>
                <Button type="success" size="small" style="margin-right: 5px" v-has="vm.$res.updateUser"
                        :to="{path: '/core/editUser', query: {userId: row.id} }">编辑
                </Button>
                <Button type="error" size="small" style="margin-right: 5px" v-has="vm.$res.deleteUser"
                        @click="remove(row.id)">删除
                </Button>
                <Button type="warning" size="small" :to="{path: '/core/resetPassword', query: {userId: row.id} }"
                        style="margin-right: 5px" v-has="vm.$res.restPassword">重置密码
                </Button>
            </template>
        </Table>
        <div style="text-align: right">
            <router-link to="/core/addUser">
                <Button class="add" icon="plus-round" shape="circle" type="primary" v-has="this.$res.addUser">添加
                </Button>
            </router-link>
        </div>
        <div style="text-align: right;margin: 5px">
            <Page :total="total" @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator show-sizer
                  show-total
                  :page-size="pageSize"
                  size="small"/>
        </div>
        <Modal @on-ok="ok" v-if="this.role.length>0" v-model="model">
            <template v-for="item in this.role">
                <checkbox v-model="item.status">{{item.name}}</checkbox>
            </template>
        </Modal>
    </div>

</template>

<script>
    export default {
        name: 'userList',
        metaInfo: {
            title: '用户列表',
        },
        data() {
            return {
                columns: [
                    {title: '编号', key: 'id', align: 'center', width: 80},
                    {title: '账号', key: 'username', align: 'center'},
                    {title: '姓名', key: 'name', align: 'center'},
                    {
                        title: '角色', key: 'role', align: 'center', render: (h, params) => {
                            let roleName = this.roleDetail(params.row);
                            return h('span', roleName.join(","))
                        }
                    },
                    {
                        title: '状态', key: 'status', align: 'center', render: (h, params) => {
                            return h("span", params.row.status === 0 ? '正常' : '禁用')
                        }
                    },
                    {title: '创建时间', key: 'createDate', align: 'center', width: 180},
                    {
                        title: '操作', key: 'operate', width: "400", align: 'center', render: (h, params) => {
                            return h('div', this.$refs.myTable.$scopedSlots.operate(params.row))
                        }
                    },
                ],
                // 用户数据
                data1: [],
                // 分页相关
                total: 0, // 总数据大小
                pageSize: 10, // 页码大小
                page: 1,
                // 角色列表
                role: [],
                model: false,
                userId: '',
                vm: this,
            }
        },
        mounted: function () {
            // 获取用户数据
            this.getData()
            // 获取全部角色
            this.getRole()

        },
        methods: {
            // 修改当前页码
            pageChange: function (val) {
                this.page = val
                this.getData()
            },
            // 修改页码大小
            sizeChange: function (val) {
                this.pageSize = val
                this.getData()
            },
            // 获取数据
            getData: function () {
                this.$kit.ajaxGet(this.$res.userList, {page: this.page, pageSize: this.pageSize}, (res) => {
                    this.data1 = res.data.data.data
                    this.total = res.data.data.totalSize
                }, this)
            },
            // 获取所有的角色
            getRole: function () {
                let vm = this;
                this.$kit.ajaxGet(this.$res.listRole, {}, (res) => {
                    res.data.data.map(function (item) {
                        vm.role.push({id: item.id, name: item.name, status: false})
                    })

                }, this)
            },
            remove: function (id) {
                let param = {msg: "用户", id: id, permissionId: this.$res.deleteUser}
                this.$emit("remove", param, () => {
                    this.getData();
                })
            },
            // 角色名称处理
            roleDetail: function (row) {
                let userRole = [];
                if (row.role !== null) {
                    row.role.split(',').map(function (item) {
                        if (item !== "") {
                            userRole.push(item)
                        }
                    })
                }
                return userRole
            },
            // 授予用户角色
            change: function (row) {
                console.log(row)
                // 获取用户角色
                let userRole = row.role;
                // 用户默认如果没有角色身份时,避免分割出错
                if (userRole !== null) {
                    userRole = userRole.split(",")
                    // 标记用户拥有的角色
                    this.role.forEach(function (items) {
                        items.status = false
                        userRole.map(function (item) {
                            if (items.name === item) {
                                items.status = true
                            }
                        })
                    })
                }
                this.model = true
                this.userId = row.id
            },
            // 确认授权操作
            ok: function () {
                let role = []
                this.role.map(function (item) {
                    if (item.status) {
                        role.push(item.id)
                    }
                })
                let vm = this;
                // 角色集合大于0
                if (role.length > 0) {
                    // 角色ID数组使用链接分开
                    this.$kit.ajaxPost(this.$res.userAddRole, {
                        userId: this.userId,
                        roleId: role.join(",")
                    }, (res) => {
                        this.$Message.success(res.data.msg)
                        // 重新加载数据
                        vm.getData()
                    }, this)
                } else {
                    this.$Message.error("授权角色不能为空")
                }

            },
            // 状态调整
            statusUpdate: function (row, status) {
                this.$Modal.confirm({
                    title: '账号状态调整确认',
                    content: '<p>你确定要' + status === 0 ? "启用" : "停用" + '该账号吗?</p>',
                    onOk: () => {
                        this.$kit.ajaxPut(this.$res.userStatus, {id: row.id, status: status}, (res) => {
                            this.$Message.success(res.data.msg)
                            this.$router.go(0);
                        }, this)
                    },
                    onCancel: () => {
                        this.$Message.info('取消操作')
                    }
                })
            }
        }

    }
</script>

<style scoped>

</style>
